Fix: Use aria-selected instead of aria-checked for SelectPanel listbox items#3875
Conversation
🦋 Changeset detectedLatest commit: cc568c6 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
There was a problem hiding this comment.
Pull request overview
Fixes SelectPanel listbox option accessibility by ensuring option items always use aria-selected (instead of aria-checked) so screen readers announce selection state correctly in multiselect.
Changes:
- Update SelectPanel’s JS behavior to always read/write selection via
aria-selected. - Update SelectPanel’s Ruby ItemList to always render
aria-selectedfor listbox options. - Update system tests and add a patch changeset entry.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
app/components/primer/alpha/select_panel_element.ts |
Always uses aria-selected when toggling/reading option selection state. |
app/components/primer/alpha/select_panel.rb |
Forces listbox ItemList to render selection using aria_selected_variant: :selected. |
test/system/alpha/select_panel_test.rb |
Updates assertions to validate aria-selected behavior instead of aria-checked. |
.changeset/seven-papayas-glow.md |
Adds release note for the accessibility fix. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| # nothing is checked initially | ||
| refute_selector "[aria-checked=true]" | ||
| refute_selector "[aria-selected=true]" | ||
| refute_selector "[aria-selected=true]" |
There was a problem hiding this comment.
Duplicate assertion: there are two consecutive refute_selector "[aria-selected=true]" lines. This is redundant and can be reduced to a single assertion (or replaced with a more specific check, e.g., count-based, if you intended to assert something else).
| refute_selector "[aria-selected=true]" |
2 participants
What are you trying to accomplish?
This PR fixes a screen reader accessibility issue where SelectPanel multiselect items were incorrectly announced. Screen readers were announcing "not selected" for all items regardless of their actual selection state.
Problem
When using SelectPanel with role="listbox" and items with role="option", the component was using
aria-checkedfor multi-select mode andaria-selectedfor single-select mode. However, per the WAI-ARIA 1.2 specification, elements with role="option" havearia-selectedas a Required State.Solution
Always use
aria-selectedfor listbox option items, regardless of whether the SelectPanel is in single-select or multi-select mode.Screenshots
Integration
List the issues that this change affects.
Related issue https://github.com/github/accessibility-audits/issues/14736
Risk Assessment
What approach did you choose and why?
Anything you want to highlight for special attention from reviewers?
Accessibility
Merge checklist
Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.